/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
var tabCount = 0;
function viewTopicDetail(topicId,pageIndex)
{
    var mgr = new Ext.Updater("divViewTopic");
    mgr.update({
        url: "topicDetailData.jsp", 
            params: "topicId="+topicId+"&page="+pageIndex,
            text: "正在读取帖子..."
        });
    //document.getElementById("divViewTopic").style.display='none';

    mgr.on("update", function(){
       tabCount++;
       var tanpan = new Ext.Panel({
            id:'tab'+ tabCount,
            html:document.getElementById('divViewTopic').innerHTML,
            title:"查看主题",
            closable:true,
            autoScroll:true
        });
        panel.add(tanpan);
        panel.activate('tab'+ tabCount);
    });
}
   
   
function pagingTopicDetail(topicId,pageIndex)
{
    var mgr = new Ext.Updater("divViewTopic");
    mgr.update({
        url: "topicDetailData.jsp", 
            params: "topicId="+topicId+"&page="+pageIndex,
            text: "正在读取帖子..."
        });
    document.getElementById("divViewTopic").style.display='none';
    mgr.on("update", function(){
       var orgId = panel.getActiveTab().id;
       
       panel.remove(orgId);
       panel.add({
            id:orgId,
            html:document.getElementById('divViewTopic').innerHTML,
            title:"查看主题",
            closable:true,
            autoScroll:true
        });
        panel.activate(orgId);
    });
}


var storeComments;
var cmComments;
var gridComments;
function templateCommentsGrid()
{
    storeComments = new Ext.data.Store({
        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        proxy: new Ext.data.HttpProxy({
            url: 'commentsData.jsp'
        }),
        
        // create reader that reads the Topic records
        reader: new Ext.data.JsonReader({
            root: 'root',
            totalProperty: 'totalCount',
            //id: 'threadid',
            fields: [
                {name: 'comments'}
            ]
        })
        // turn on remote sorting
        //remoteSort: true
    });

    cmComments = new Ext.grid.ColumnModel([{
           //id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
           header: "评论",
           dataIndex: 'comments',
           width: 400
           //renderer: renderTopic
        }]);

    // by default columns are sortable
    cmComments.defaultSortable = true;

    gridComments = new Ext.grid.GridPanel({
        el:'divComments',
        //width:600,
        height:383,
        //title:'gridview',
        store: storeComments,
        cm: cmComments,
        trackMouseOver:false,
        sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
        loadMask: true,
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true
        },
        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: storeComments,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show Preview',
                cls: 'x-btn-text-icon details',
                toggleHandler: toggleCommentsDetails
            }]
        })
    });
}

function viewComments(topicId)
{
    document.getElementById("divHelp").style.display='none';
    gridComments.render();
    // trigger the data store load
    storeComments.load({params:{start:0, limit:25, topicId:topicId}});

    //panel.activeTab = 2;
    //panel.render();
}

function toggleCommentsDetails(btn, pressed){
    var view = gridTopicList.getView();
    view.showPreview = pressed;
    view.refresh();
}

var storeRecentList;
var cmRecentList;
var gridRecentList;
function showAllTopics(userId)
{
    if(storeRecentList==null)
    {
        storeRecentList = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({
                url: 'topicListData.jsp?todo=recent'
            }),
            // create reader that reads the Topic records
            reader: new Ext.data.JsonReader({
                root: 'root',
                totalProperty: 'totalCount',
                id: 'threadid',
                fields: [
                    {name: 'title'},
                    {name: 'userName'},
                    {name: 'shortUpdateTime'},
                    {name: 'id'},
                    {name: 'uid'},
                    {name: 'repliedCount'}
                ]
            })
        });
    }
    // pluggable renders
    function renderUser(value, p, record)
    {
        return String.format('<table style="height:25px"><tr><td><div style="height:25px"><div style="height:3px"></div><a href="#" onclick=showUserInfo({2},"{3}") onmouseover="showSimpleViewOfUser({1})" onmouseout="hideSimpleViewOfUser()"><font size="3">{0}</font></a><div style="height:3px"></div></div></td></tr></table>',value,record.data.uid,record.data.uid,record.data.userName);
    }
    function renderTime(value, p, record)
    {
        return String.format('<table style="height:10px;"><tr><td valign="center">{0}</td></tr></table>',value);
    }
    function renderReply(value, p, record)
    {
        return String.format('<table style="height:10px;"><tr><td valign="center">{0}</td></tr></table>',value);
    }
    function renderTitle(value, p, record)
    {
        return String.format('<table style="height:5px;"><tr><td valign="center"><div style="height:9px"></div><font size="3"><a href="#" onclick="viewTopicDetail({1},1);">{0}</a></font></td></tr></table>',value,record.data.id);
    }

    if(cmRecentList==null)
    {
        cmRecentList = new Ext.grid.ColumnModel([{
           //id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
           header: "主题",
           dataIndex: 'title',
           width: 270,
           renderer: renderTitle
        },{
           header: "发帖人",
           dataIndex: 'userName',
           width: 70,
           align: 'center',
           renderer: renderUser
        },{
           header: "更新时间",
           dataIndex: 'shortUpdateTime',
           width: 80,
           align: 'right',
           renderer:renderTime
        },{
           header: "回复/阅读",
           dataIndex: 'repliedCount',
           width: 50,
           align: 'center',
           renderer:renderReply
        }]);
        cmRecentList.defaultSortable = true;
    }

    if(gridRecentList==null)
    {
        gridRecentList = new Ext.grid.GridPanel({
            el:'divRecentList',
            store: storeRecentList,
            cm: cmRecentList,
            trackMouseOver:true,
            sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
            loadMask: true,
            iconCls:'icon-grid',
            autoScroll: true,
            border: false,
            viewConfig: {
                forceFit:true,
                enableRowBody:true,
                showPreview:false,
                getRowClass : function(record, rowIndex, p, store){
                    if(this.showPreview){
                        p.body = '<p>'+record.data.title+'</p><br>';
                        return 'x-grid3-row-expanded';
                    }
                    return 'x-grid3-row-collapsed';
                }
            },
            bbar: new Ext.PagingToolbar({
                pageSize: 25,
                store: storeRecentList,
                displayInfo: true,
                displayMsg: '显示的主题 {0} - {1} of {2}',
                emptyMsg: "暂无帖子"
            })
        });
    }
    gridRecentList.render();
    storeRecentList.load({params:{start:0, limit:25}});
    tabCount++;
    var panRecent = new Ext.Panel({
        id:'tabRecentList',
        //html:document.getElementById('divViewTopic').innerHTML,
        title: '最近发表',
        //closable:true,
        autoScroll:true,
        //items:[divRecentList]
        el : 'divRecentList'
    });
    panel.add(panRecent);
    panel.activate('tabRecentList');
    panel.render();
}

var winReplyDlg;
function showReplyDlg(topicId)
{
    if(winReplyDlg==null)
    {
        Ext.QuickTips.init();
        winReplyDlg = new Ext.FormPanel({
            labelAlign: 'top',
            frame:true,
            title: 'Multi Column, Nested Layouts and Anchoring',
            bodyStyle:'padding:5px 5px 0',
            width: 600,
            items: [{
                layout:'column',
                items:[{
                    columnWidth:.5,
                    layout: 'form',
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'First Name',
                        name: 'first',
                        anchor:'95%'
                    }, {
                        xtype:'textfield',
                        fieldLabel: 'Company',
                        name: 'company',
                        anchor:'95%'
                    }]
                },{
                    columnWidth:.5,
                    layout: 'form',
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'Last Name',
                        name: 'last',
                        anchor:'95%'
                    },{
                        xtype:'textfield',
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email',
                        anchor:'95%'
                    }]
                }]
            },{
                xtype:'htmleditor',
                id:'bio',
                fieldLabel:'Biography',
                height:200,
                anchor:'98%'
            }],

            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
    });
    }
    winReplyDlg.render(document.body);
}